<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例</title>
  <style>  
    /* 去掉表格的边距和填充 */  
    table {  
        border-collapse: collapse; /* 改为 collapse 以去掉单元格之间的空隙 */  
        table-layout: auto; /* 自适应列宽 */  
        max-width: 100%; /* 最大宽度为100% */  
        width: auto; /* 自动宽度 */  
    }  

    th, td {  
        padding: 5px; /* 设置适当的填充 */  
        margin: 0; /* 去掉单元格外的边距 */  
        border: 1px solid black; /* 设置边框样式 */  
        padding: auto;
    }  

    /* 可选：设置表格头部的背景色 */  
    th {  
        background-color: #f2f2f2; /* 背景色 */  
    }  
    .active { /*点击单元格时,整行变色*/
      background-color: skyblue;
    }
</style>
</head>
<body>
  <div id="app">
    <table border="1">
      <thead>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        <tbody>
          <tr :class="{active: index === currentIndex}" @click="clickIndex(index)" v-for="(book, index) in books" :key="index">
            <td>{{index+1}}</td>
            <td>{{book.name}}</td>
            <td>{{book.public}}</td>
            <td>¥{{book.price}}</td>
            <td><button @click="decrease(book, index)">-</button> {{book.buyNum}} <button @click="increase(book, index)">+</button></td>
            <td><button @click="removeBook(book, index)">移除</button></td>
          </tr>
        </tbody>
      </thead>
    </table>
    <h2>总价: ¥{{calculateToalPrice()}}</h2>
    <h2>总价: ¥{{calculateAllPrice}}</h2>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      data: function(){
        return {
          books: [
            {name: "<<算法导论>>", public: "2000-9", price: 85, buyNum: 0, option: 1},
            {name: "<<UNIX编程艺术>>", public: "2006-2", price: 59, buyNum: 0, option: 1},
            {name: "<<编程珠玑>>", public: "2008-10", price: 39, buyNum: 0, option: 1},
            {name: "<<代码大全>>", public: "2006-3", price: 128, buyNum: 0, option: 1},
          ],
          totalPrice: 0,
          currentIndex: 0
        }
      }
      ,methods: {
        removeBook(book, index) {
          console.log(index)
          this.books.splice(index, 1)
          console.log(this.books)
        },
        decrease(book, index) {
          this.books[index].buyNum <= 0 ? alert("数量不能低于0") : this.books[index].buyNum--
        },
        increase(book, index) {
          console.log(book)
          console.log(index)
          console.log(this.books[index])
          this.books[index].buyNum++
        },
        calculateToalPrice: function() {
          // const allPrice=0 // const是常量,不允许修改,否则报错
          let allPrice=0
          for(const [index, book] of this.books.entries()){
            console.log((this.books[index].buyNum) * (this.books[index].price))
            allPrice = allPrice + (this.books[index].buyNum) * (this.books[index].price)
          }
          return allPrice
        },
        clickIndex(index) {
          this.currentIndex = index
        }
      },
      computed: {
        calculateAllPrice() {
          this.totalPrice = this.books.reduce((total, book) => {
            return total + book.price * book.buyNum;
          }, 0)
          return this.totalPrice
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
  </script>

</body>
</html>
